{{template "layout.html" .}}

{{define "content"}}
<div class="container-fluid">
    <!-- 页面标题和操作按钮 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2>虚拟环境管理</h2>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createVenvModal">
                    <i class="fas fa-plus" aria-hidden="true"></i> 创建环境
                </button>
            </div>
        </div>
    </div>

    <!-- 虚拟环境列表 -->
    <div class="row">
        {{range .venvs}}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card venv-card" id="venv-{{.Name}}">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">{{.Name}}</h5>
                    <span class="badge bg-primary">Python {{.Version}}</span>
                </div>
                <div class="card-body">
                    <p class="card-text">
                        <small class="text-muted">
                            <i class="fas fa-box" aria-hidden="true"></i> 已安装包：{{.PackageCount}} 个
                        </small>
                    </p>
                    <div class="btn-group w-100">
                        <button class="btn btn-primary install-package" data-bs-toggle="modal" data-bs-target="#installPackageModal" data-venv-name="{{.Name}}" aria-label="安装包">
                            <i class="fas fa-download" aria-hidden="true"></i> 安装包
                        </button>
                        <button class="btn btn-info view-packages" data-bs-toggle="modal" data-bs-target="#viewPackagesModal" data-venv-name="{{.Name}}" aria-label="查看包列表">
                            <i class="fas fa-list" aria-hidden="true"></i> 包列表
                        </button>
                        <button class="btn btn-danger delete-venv" data-venv-name="{{.Name}}" aria-label="删除环境">
                            <i class="fas fa-trash" aria-hidden="true"></i> 删除
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{else}}
        <div class="col-12">
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle" aria-hidden="true"></i> 暂无虚拟环境，点击右上角按钮创建新环境。
            </div>
        </div>
        {{end}}
    </div>
</div>

<!-- 创建虚拟环境模态框 -->
<div class="modal fade" id="createVenvModal" tabindex="-1" aria-labelledby="createVenvModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createVenvModalLabel">创建虚拟环境</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="create-venv-form">
                    <div class="mb-3">
                        <label for="venv-name" class="form-label">环境名称</label>
                        <input type="text" class="form-control" id="venv-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="python-version" class="form-label">Python 版本</label>
                        <select class="form-select" id="python-version" name="version" required>
                            <option value="3.12">Python 3.12</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="submit" form="create-venv-form" class="btn btn-primary">创建</button>
            </div>
        </div>
    </div>
</div>

<!-- 安装包模态框 -->
<div class="modal fade" id="installPackageModal" tabindex="-1" aria-labelledby="installPackageModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="installPackageModalLabel">安装包</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="install-package-form">
                    <input type="hidden" id="install-venv-name" name="venv_name">
                    <div class="mb-3">
                        <label for="package-name" class="form-label">包名称</label>
                        <input type="text" class="form-control" id="package-name" name="package" required placeholder="例如：numpy==1.21.0">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="submit" form="install-package-form" class="btn btn-primary">安装</button>
            </div>
        </div>
    </div>
</div>

<!-- 查看包列表模态框 -->
<div class="modal fade" id="viewPackagesModal" tabindex="-1" aria-labelledby="viewPackagesModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewPackagesModalLabel">已安装的包</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>包名</th>
                                <th>版本</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="package-list">
                            <!-- 包列表将通过 AJAX 动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast 容器 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
{{end}}

{{define "scripts"}}
<script>
$(document).ready(function() {
    // 创建虚拟环境
    $('#create-venv-form').submit(function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        
        $.ajax({
            url: '/venv',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function() {
                $('#createVenvModal').modal('hide');
                showToast('虚拟环境创建成功');
                location.reload();
            },
            error: function(xhr) {
                showToast('创建失败: ' + xhr.responseJSON.error);
            }
        });
    });

    // 安装包
    $('#install-package-form').submit(function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const venvName = $('#install-venv-name').val();
        
        $.ajax({
            url: `/venv/${venvName}/packages`,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function() {
                $('#installPackageModal').modal('hide');
                showToast('包安装请求已提交');
                location.reload();
            },
            error: function(xhr) {
                showToast('安装失败: ' + xhr.responseJSON.error);
            }
        });
    });

    // 查看包列表
    $('.view-packages').click(function() {
        const venvName = $(this).data('venv-name');
        
        $.get(`/venv/${venvName}/packages`, function(packages) {
            const tbody = $('#package-list');
            tbody.empty();
            
            packages.forEach(function(pkg) {
                tbody.append(`
                    <tr>
                        <td>${pkg.name}</td>
                        <td>${pkg.version}</td>
                        <td>
                            <button class="btn btn-danger btn-sm uninstall-package" data-venv-name="${venvName}" data-package="${pkg.name}">
                                <i class="fas fa-trash" aria-hidden="true"></i> 卸载
                            </button>
                        </td>
                    </tr>
                `);
            });
        });
    });

    // 卸载包
    $(document).on('click', '.uninstall-package', function() {
        const venvName = $(this).data('venv-name');
        const packageName = $(this).data('package');
        
        if (confirm(`确定要卸载 ${packageName} 吗？`)) {
            $.ajax({
                url: `/venv/${venvName}/packages/${packageName}`,
                type: 'DELETE',
                success: function() {
                    showToast('包卸载成功');
                    $(this).closest('tr').remove();
                },
                error: function(xhr) {
                    showToast('卸载失败: ' + xhr.responseJSON.error);
                }
            });
        }
    });

    // 删除虚拟环境
    $('.delete-venv').click(function() {
        const venvCard = $(this).closest('.venv-card');
        const venvName = $(this).data('venv-name');
        
        if (confirm('确定要删除这个虚拟环境吗？此操作不可恢复，且可能影响使用此环境的脚本。')) {
            $.ajax({
                url: `/venv/${venvName}`,
                type: 'DELETE',
                success: function() {
                    venvCard.fadeOut(400, function() {
                        $(this).remove();
                        if ($('.venv-card').length === 0) {
                            location.reload();
                        }
                    });
                    showToast('虚拟环境已删除');
                },
                error: function(xhr) {
                    showToast('删除失败: ' + xhr.responseJSON.error);
                }
            });
        }
    });

    // 打开安装包模态框时设置虚拟环境名称
    $('#installPackageModal').on('show.bs.modal', function(e) {
        const button = $(e.relatedTarget);
        const venvName = button.data('venv-name');
        $('#install-venv-name').val(venvName);
    });
});
</script>
{{end}} 